package com.example.newsapp.ui.components.pictureComponent.sortList

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import com.example.newsapp.R
import com.example.newsapp.data.compositionLocal.LocalNavController
import com.example.newsapp.data.list.imageList.sceneImageUrls
import com.example.newsapp.data.`object`.PageNavigation
import com.example.newsapp.data.`object`.PictureState
import kotlinx.coroutines.delay

// 风景图片列表
@Composable
fun ScenePictureList(modifier: Modifier = Modifier) {
    var context = LocalContext.current
    var navController = LocalNavController.current

    if (PictureState.keyRefresh) {
        sceneImageUrls.shuffle()
        PictureState.keyRefresh = false
    }
    if (PictureState.sceneInit) {
        sceneImageUrls.shuffle()
        PictureState.sceneInit = false
    }
    // 使用 LazyVerticalGrid 实现两列布局
    LazyVerticalGrid(
        columns = GridCells.Fixed(2), // 两列
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp), // 边界间距
        verticalArrangement = Arrangement.spacedBy(8.dp), // 垂直间距
        horizontalArrangement = Arrangement.spacedBy(8.dp) // 水平间距
    ) {
        items(sceneImageUrls.size) { index ->
            val (title, url) = sceneImageUrls[index]
            var showDialog by rememberSaveable { mutableStateOf(false) }
            LaunchedEffect(PictureState.showImage) {
                delay(1000) // 延迟 1 秒
                PictureState.showImage = true
            }
            val painter = rememberAsyncImagePainter(
                model = ImageRequest.Builder(LocalContext.current)
                    .data(url)
                    .placeholder(R.drawable.placeholder_300x400)
                    .build()
            )
            Column (
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = modifier
                    .aspectRatio(3f / 4f) // 确保图片宽高比为 1:1
                    .clip(RoundedCornerShape(8.dp)) // 圆角
                    .background(Color.White) // 背景颜色
                    .padding(4.dp) // 内部间距
            ) {
                Image(
                    painter = if (PictureState.showImage) painter else rememberAsyncImagePainter(
                        model = ImageRequest.Builder(context)
                            .data(R.drawable.placeholder_300x400)
                            .build()
                    ),
                    contentDescription = null,
                    contentScale = ContentScale.Crop, // 裁剪图片以适应容器
                    modifier = Modifier.weight(1f).clickable {
                        showDialog = true
                    }
                )
                Text(
                    text = title,
                    modifier = Modifier.align(Alignment.CenterHorizontally),
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }
            if (showDialog) {
                AlertDialog(
                    onDismissRequest = { showDialog = false },
                    shape = RectangleShape,
                    title = {
                        Text(
                            text = "关闭",
                            style = TextStyle(fontSize = 20.sp),
                            color = Color.Blue,
                            modifier = Modifier.background(Color.Red)
                                .clickable {
                                    showDialog = false
                                }
                        )
                    },
                    text = {
                        Image(
                            painter = rememberAsyncImagePainter(
                                model = ImageRequest.Builder(context)
                                    .data(url)
                                    .build()
                            ),
                            contentDescription = null,
                            contentScale = ContentScale.Crop,
                            modifier = Modifier.fillMaxSize()
                        )
                    },
                    containerColor = Color.Transparent,
                    modifier = Modifier.fillMaxWidth().height(550.dp),
                    confirmButton = {
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.Center,
                            modifier = Modifier.fillMaxWidth()
                        ) {
                            Row(
                                verticalAlignment = Alignment.CenterVertically,
                                modifier = Modifier.background(Color.White)
                                    .clickable(
                                        interactionSource = null,
                                        indication = null
                                    ) {
                                        navController.navigate("${PageNavigation.viewImage}?title=${title}&url=${url}")
                                    }
                            ) {
                                Icon(
                                    painter = painterResource(R.drawable.baseline_fullscreen_24),
                                    contentDescription = null,
                                    modifier = Modifier.size(34.dp)
                                )
                                Text(
                                    text = "全屏显示",
                                    fontSize = 20.sp,
                                    modifier = Modifier.padding(bottom = 3.dp)
                                )
                            }
                        }
                    },
                )
            }
        }
    }
}